<template>
  <!-- 问题分类弹窗 -->
  <a-modal
    :title="headerTitle"
    :visible.sync="dialogVisible"
    width="900px"
    @cancel="handleCancel"
  >
    <a-spin :spinning="boxLoading">
      <!-- 表单 -->
      <a-form-model
        ref="ruleForm"
        :model="forms"
        :rules="editModel != 2 ? rules : {}"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <div id="dialogDistrictBox">
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                prop="name"
                label="所属分项工程"
              >
                <BaseInput
                  v-model="forms.subItemName"
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                prop="problemTypeName"
                label="问题分类名称"
              >
                <BaseInput
                  v-model="forms.problemTypeName"
                  :disabled="editModel == '2'"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item
                prop="problemType"
                label="问题描述"
              >
                <BaseTextarea
                  v-model="forms.problemType"
                  :disabled="editModel == '2'"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item
                prop="problemTypeDescription"
                label="规范规定"
              >
                <BaseTextarea
                  v-model="forms.problemTypeDescription"
                  :disabled="editModel == '2'"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="问题类型映射id" prop="thirdProblemTypeId">
                <BaseInput
                  v-model="forms.thirdProblemTypeId"
                  :disabled="editModel == '2'"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div
      slot="footer"
      class="btn_box"
    >
      <a-button
        v-if="editModel != 2"
        :loading="loading"
        type="primary"
        class="button_right"
        @click="handleOk"
      >
        提交
      </a-button>
      <a-button
        type="primary"
        @click="handleCancel"
      >
        关闭
      </a-button>
    </div>
  </a-modal>
</template>

<script>
import { problemType } from '@/api/quality/quality'
import cloneDeep from 'lodash.clonedeep' // 深拷贝
export default {
  name:'a'+ Date.now(),
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    // 操作类型
    editModel: {
      type: [String, Number],
      default() {
        return 0
      },
    },
    // 表单
    form: {
      type: Object,
      default() {
        return {}
      },
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return ''
      },
    },
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
  },
  data() {
    return {
      loading: false,
      boxLoading: false,
      forms: {},
      rules: {
        subItemName: [{ required: true, message: '请选择所属分项工程', trigger: 'change' }],
        problemTypeName: [{ required: true, whitespace: true, message: '请输入问题分类名称', trigger: 'change' }],
        problemType: [{ required: true, whitespace: true, message: '请输入问题描述', trigger: 'change' }],
        thirdProblemTypeId: [{ required: true, whitespace: true, message: '请输入问题类型映射id', trigger: 'change' }],
        problemTypeDescription: [
          { required: true, whitespace: true, message: '请输入规范规定', trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$emit('confirm', this.forms)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    },
    handleChange() {},
  },
  watch: {
    visible(e) {
      if (e) {
        this.loading = false
        this.$nextTick(() => {
          // 若操作为查看和编辑
          if (this.editModel != 0) {
            this.boxLoading = true
            problemType
              .getDetail({
                id: this.form.id,
              })
              .then((res) => {
                this.boxLoading = false
                if (res.code == 200) {
                  this.forms = res.data
                }
              })
              .catch((res) => {
                this.boxLoading = false
              })
          } else {
            this.forms = cloneDeep(this.form)
          }
        })
      } else {
        // 初始化表单
        this.forms = {}
        this.$refs.ruleForm.clearValidate()
      }
    },
  },
}
</script>

<style>
#dialogDistrictBox .ant-checkbox-group .ant-form-item label {
  position: relative !important;
}
</style>
